<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
      /*何函杰 209000627*/
      * {
      margin: 0;
      padding: 0;
    }
        ul,li{
            list-style: none;
        }
		a{
			text-decoration: none;
		}
        .nav{
		   height: 100px;
       border-bottom: 8px solid #ed1d24;
		   background: url(nav-bg.png);
        }
		.nav-list{
			width: 1500px;
			margin: 0 auto;
		}
		.menus{
			float: left;
		}
		.menus .menus-a{
		
			float: left;
			font-size: 23px;
			color: #ffffff;
			font-weight: bold;
			width: 140px;
			text-align: center;
			height: 70px;
			padding: 30px 0 0 0;
			border-right: 3px #FFFFFF solid;
		}
		.menus>.menus-a:hover{
			background: url(nav.png);
		}
    /*何函杰 209000627*/
		.nav-list-menu{
			display: block;
			width: 110px;
			text-align: center;
			z-index: 1000;
			margin-top: 100px;
		}
		.List a{
      margin: 0 auto;
			float: left;
			font-size: 20px;
			background-color: #EB131E;
			color: #FFFFFF;
			width: 140px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border-top: 1px #ffffff solid;
		}
        .List a:hover{
			background-color: #a50303;
		}
 
    </style>

</head>
<body>
  何函杰 209000627
    <div id="app"></div>
    <template id="base"> 
        <div class='nav'>
            <ul class="nav-list">
                <li v-for="(nav,index) in menus" :key="index" class="menus" @mouseover="nav.show=!nav.show" @mouseout="nav.show=!nav.show">
                    <a :href="nav.url" class="menus-a">
                        {{nav.name}}
                    </a>
                   <ul class="nav-list-menu" v-show='nav.show'>
                        <li v-for="List in nav.Menu" class="List">
                            <a :href="nav.url">
                                {{List.name}}
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </template>
    <script>
       //何函杰 209000627
        const app = Vue.createApp({
            template:'#base',
            data(){
                return {
                    menus:[
                        {name:'首页',url:'#'},

                        {name:'关于红岩',url:'#',Menu:[
                            {name:'红岩文化',url:'#',},
                            {name:'博物馆机构',url:'#',},
                            {name:'历史沿革',url:'#',},
                        ]},
                        {name:'公告动态',url:'#',Menu:[
                            {name:'文博信息',url:'#',},
                            {name:'政务平台',url:'#',},
                            {name:'公告',url:'#',},
                            {name:'专题报道',url:'#',},
                        ]},
                        {name:'馆藏精品',url:'#',Menu:[
                            {name:'一级文物',url:'#',},
                            {name:'二级文物',url:'#',},
                            {name:'三级文物',url:'#',},
                        ]},
                        {name:'陈列展览',url:'#',Menu:[
                            {name:'虚拟展览',url:'#',},
                            {name:'基本陈列',url:'#',},
                            {name:'复原陈列',url:'#',},
                            {name:'临时展览',url:'#',},
                            {name:'展览交流',url:'#',},
                        ]},
                        {name:'研究开发',url:'#',Menu:[
                            {name:'历史研究',url:'#',},
                            {name:'艺术创作',url:'#',},
                            {name:'影音在线',url:'#',},
                            {name:'文创产品',url:'#',},
                        ]},
                        {name:'公共教育',url:'#',Menu:[
                            {name:'党性教育',url:'#',},
                            {name:'爱国主义教育',url:'#',},
                            {name:'研学实践教育',url:'#',},
                            {name:'科普教育',url:'#',},
                        ]},
                        {name:'参观服务',url:'#',Menu:[
                            {name:'景点介绍',url:'#',},
                            {name:'服务内容',url:'#',},
                            {name:'网上预约',url:'#',},
                            {name:'志愿服务',url:'#',},
                        ]},
                        {name:'网上预约',url:'#',},

                    ]
                }
            },
        })
        app.mount('#app')
    </script>
</body>
</html>
